<script setup>
import { useRoute,useRouter } from 'vue-router';
import { computed, ref,onBeforeUnmount } from 'vue';
import { getOrderDesc,pay,cancelOrder, doRefund, again, confrims } from '@/api/order';
import MyMap from '@/components/MyMap/MyMap.vue';
import { useCartStore } from '@/stores/cart';
const route = useRoute()
const router =useRouter()
const { id, address, name, phone, time, amount,status,estimatedDeliveryTime } = route.query
//超时时间
const begin = new Date(time).getTime()
const end = begin + 900000
let now = ref(undefined)
if(status === '1'){
    var timer = setInterval(() => {
    now.value = end - Date.now()
    if (now.value <= 0) {
        alert('订单已超时')
        clearInterval(timer)
        doCancelOrder()
    }
}, 1000)
}

onBeforeUnmount(() => {
    clearInterval(timer)
})

const minutes = computed(() => {
    const r = new Date(now.value).getMinutes()
    return r >= 10 ? r : '0' + r
})
const seconds = computed(() => {
    const r = new Date(now.value).getSeconds()
    return r >= 10 ? r : '0' + r
})
//获取订单详情
const orderDesc = ref(undefined)
async function getOdsc() {
    const { data } = await getOrderDesc(id)
    orderDesc.value = data
}
getOdsc()
//支付
const dialogVisible = ref(false)
const payPwd = ref(undefined)
async function goPay() {
    if(!payPwd.value){
        alert('请输入支付密码')
        return
    }
    const res = await pay({orderId: id,payMethod:1,password: payPwd.value})
    if(res.code === 0){
        alert(res.msg)
        return
    }
    useCartStore().getCartList()
    router.replace('/success')
}
//取消订单
const dialog2Visible = ref(false)
const reason = ref(undefined)
async function doCancelOrder(){
     await cancelOrder({id,cancelReason: reason.value})
     router.replace('/home')
}
//状态
const statusOrder = computed(() => {
    if(status === '1'){
        return '待支付'
    }else if(status === '7'){
        return '已取消'
    }else if(status === '3'){
        return '已发货'
    }else{
        return '已支付'
    }
})
//申请退款
async function refund(){
    let flag = confirm('这件商品目前很抢手哦，您确认要申请退款吗')
    if(flag){
       const res = await doRefund(id)
       ElNotification({
        type: "success",
        message: res.data,
        duration: 2000
      });
      router.replace('/my')
    }
}
//再来一单
async function doAgain(){
    await again(id)
    ElNotification({
        type: "success",
        message: '下单成功',
        duration: 2000
      });
      router.replace('/home')
}
async function doConfirm(){
    await confrims(id)
    ElNotification({
        type: "success",
        message: '确认收货',
        duration: 2000
      });
      router.replace('/home')
}
</script>

<template>
    <div class="order">
        <header>
            <div class="content">
                <img src="/public/logo.png" alt="">
                <h2>支付订单</h2>
            </div>
        </header>
        <div class="content">
            <div class="loading" v-if="status === '1' && isNaN(minutes)">
                <img src="/public/avatar.jpg" alt="" style="width: 300px;">
                <h1>稍等小子老子为您你加载呢！</h1>
            </div>
            <div class="order_info" v-else>
                <div class="address">
                    <p>收货地址: {{ name }}&nbsp;{{ phone }}&nbsp;{{ address }}</p>
                </div>
                <div class="goods">
                    <p>商品</p>
                    <table>
                        <tr v-for="good in orderDesc" :key="good.id">
                            <td>
                                <img :src="good.goodsImage" alt="">
                            </td>
                            <td>
                                {{ good.goodsName }}
                                <p style="font-size: 12px;color: gray;">{{ good.goodsSpecsName }}</p>
                            </td>
                            <td>
                                ×{{ good.goodsNumber }}
                            </td>
                        </tr>

                    </table>
                    <div class="timeout" v-if="status === '1'">
                        <span>
                            00:{{ minutes }}: {{ seconds }}分后自动取消
                        </span>
                    </div>
                    <div class="price">应付：￥{{ amount }}</div>
                    <p style="margin: 20px 0;">状态:{{ statusOrder }}</p>
                    <p v-if="status === '2'||status === '3'">预计送达时间:{{ estimatedDeliveryTime }}</p>
                </div>
                <!-- 地图 -->
                <MyMap v-if="status === '3'" :_address="address"></MyMap>

                <div class="btn">
                    <template v-if="status === '1'">
                         <button @click="dialogVisible = true">支付</button>
                    <button @click="dialog2Visible=true">取消订单</button>
                    </template>
                    <template v-if="status === '2' ||status === '3'">
                        <button @click="refund">
                            申请退款
                        </button>
                        <button @click="doAgain">再来一单</button>
                    </template>
                    <template v-if="status === '3'">
                        <button style="margin-left: 10px; background-color: orange;" @click="doConfirm">
                            确认收货
                        </button>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" :show-close="false">
        <div class="pay_inp">
            <label>支付密码</label>
            <input type="password" v-model="payPwd">
        </div>

        <div class="btn_group">
            <button @click="goPay">确定</button>
        </div>
    </el-dialog>

    <el-dialog v-model="dialog2Visible" :show-close="false" title="注意!您正在取消订单">
        <div class="pay_inp">
            <label>取消原因</label>
            <input type="text" v-model="reason">
        </div>

        <div class="btn_group">
           
                <button @click="dialog2Visible = false">取消</button>
                <button @click="doCancelOrder">确定</button>
            
        </div>
    </el-dialog>
</template>

<style scoped lang="less">
.loading{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pay_inp{
    display: flex;
    padding-left: 240px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    label{
        height: 100%;
        background-color: #9c9696;
    }
    input{
        padding-left: 5px;
        height: 100%;
        border: 1px solid #9c9696;
    }
}
.btn_group {
    width: 100%;
    text-align: center;
    margin-top: 50px;

    button {
        padding: 5px 45px;
        margin-right: 10px;
        color: #fff;
    }

    :nth-child(1) {
        background-color: #ff6700;
    }

    :nth-child(2) {
        background-color: #b0b0b0;
    }
}

.order {
    // height: 100%;
    background-color: #f5f5f5;

    header {
        width: 100%;
        height: 100px;
        background-color: #fff;

        .content {
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 20px;

            img {
                width: 71px;
                height: 65px;
                margin-right: 60px;
            }

            h2 {
                font-weight: 400;
            }
        }
    }

    .order_info {
        text-align: center;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        margin-top: 20px;
        background-color: #fff;
        font-size: 16px;
        font-weight: 400;

        .btn {
            text-align: right;
            height: 60px;

            button {
                color: #fff;
                width: 200px;
                // height: 50px;
                height: 100%;
                background-color: red;

                &:nth-of-type(1) {
                    margin-right: 10px;
                    background-color: #ff6700;
                }
            }
        }

        .price {
            font-size: 18px;
            color: #1697d9;
            margin: 20px;
        }

        .address {
            height: 60px;
            line-height: 60px;
        }

        .goods {
            .timeout {
                font-size: 20px;
                line-height: 200px;
                height: 200px;
                border-top: 1px dashed #1697d9;
                border-bottom: 1px dashed #1697d9;
            }

            table {
                margin: 0 auto;
                width: 40%;

                td {
                    width: 30%;
                }

                img {
                    width: 100px;
                    height: 100px;
                }
            }
        }
    }
}
</style>
